<template>
	<view class="distance-sorter">
		<!-- 排序结果列表 -->
		<view class="location-list">
			<view v-for="(item, index) in sortedLocations" :key="item[itemKey] || index" class="location-item"
				@click="handleItemClick(item)">
				<slot name="item" :item="item" :index="index"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'DistanceSorter',
		props: {
			// 必传：位置数组
			locations: {
				type: Array,
				required: true,
				default: () => []
			},

			// 必传：当前经纬度对象 {latitude, longitude}
			currentLocation: {
				type: Object,
				required: true,
				validator: value => {
					return value.latitude !== undefined && value.longitude !== undefined
				}
			},

			// 可选：自定义字段名
			fieldNames: {
				type: Object,
				default: () => ({
					latitudeKey: 'latitude', // 纬度字段名
					longitudeKey: 'longitude', // 经度字段名
					displayKey: 'name', // 显示名称字段名
					itemKey: 'id' // 列表项唯一标识字段名
				})
			},

			// 是否显示当前位置
			showCurrentLocation: {
				type: Boolean,
				default: true
			},

			// 是否自动计算距离（传false则只排序不计算）
			autoCalculate: {
				type: Boolean,
				default: true
			}
		},

		data() {
			return {
				sortedLocations: []
			}
		},

		computed: {
			// 合并字段配置
			fieldConfig() {
				return {
					latitudeKey: 'latitude',
					longitudeKey: 'longitude',
					displayKey: 'name',
					itemKey: 'id',
					...this.fieldNames
				}
			},

			// 各个字段的访问key
			latitudeKey() {
				return this.fieldConfig.latitudeKey
			},
			longitudeKey() {
				return this.fieldConfig.longitudeKey
			},
			displayKey() {
				return this.fieldConfig.displayKey
			},
			itemKey() {
				return this.fieldConfig.itemKey
			}
		},

		watch: {
			// 监听数据变化重新排序
			locations: {
				immediate: true,
				deep: true,
				handler() {
					this.sortLocations()
				}
			},

			currentLocation: {
				deep: true,
				handler() {
					this.sortLocations()
				}
			}
		},

		methods: {
			// 主排序方法
			sortLocations() {
				if (!this.currentLocation || !this.locations?.length) {
					this.sortedLocations = []
					return
				}

				this.sortedLocations = this.locations
					.map(item => {
						// 计算距离
						const distance = this.autoCalculate ?
							this.calculateDistance(
								this.currentLocation.latitude,
								this.currentLocation.longitude,
								item[this.latitudeKey],
								item[this.longitudeKey]
							) :
							item.distance || 0

						// 返回新对象避免污染原数据
						return {
							...item,
							distance: Math.round(distance)
						}
					})
					.sort((a, b) => a.distance - b.distance)

				// 触发排序完成事件
				this.$emit('sorted', this.sortedLocations)
			},

			// 计算两点间距离（米）
			calculateDistance(lat1, lon1, lat2, lon2) {
				const R = 6371000 // 地球半径（米）
				const dLat = this.deg2rad(lat2 - lat1)
				const dLon = this.deg2rad(lon2 - lon1)
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2)
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
				return R * c
			},

			// 角度转弧度
			deg2rad(deg) {
				return deg * (Math.PI / 180)
			},

			// 格式化距离显示
			formatDistance(distance) {
				if (distance >= 1000) {
					return (distance / 1000).toFixed(2) + '公里'
				}
				return distance + '米'
			},

			// 点击项目事件
			handleItemClick(item) {
				this.$emit('item-click', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.distance-sorter {
		width: 100%;
	}

	.conttit {
		margin: 20rpx;
		text-align: center;
		color: #163e57;
		padding: 10rpx;
		font-size: 30rpx;
		border-radius: 30rpx;
		// background: rgba(#cce5ff, 1);
	}
	.item-name {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 5rpx;
	}

	.item-distance {
		font-size: 26rpx;
		color: #666;
	}
</style>